<template>
  <div class="box">
    <!-- 顶部我的 -->
    <div class="box1">
      <h2 class="wode">视频</h2>
      <router-link to="/set">
        <i class="shezhi iconfont icon-shezhi"></i>
      </router-link>
      <i class="shezhi1 iconfont icon-sousuo"></i>
    </div>
    <!-- 视频 -->
    <div class="box3">
      <div class="yonghu1">
        <img class="yuan1"
             src="../img/30 (2).jpg"
             title="" />
        <div class="wangming1">健康中国</div>
        <i class="huangguan iconfont icon-changyongtubiao-xianxingdaochu-zhuanqu--copy"></i>
        <van-tag class="guanzhu"
                 text-color="#f6f3ff"
                 size="large">+关注</van-tag>
        <div class="qianming1">11小时前</div>
        <div class="zi1">
          【<span style="color: blue">#健康发布</span>】
          接种疫苗需要知道哪些事？我们应该怎样做？
        </div>
      </div>
      <div class="tupian">
        <video class="shiping1"
               src="http://123.56.23.31:88/st/M00/00/01/rBgF6WCbNZeAT4-6ABRVsyLPSs4370_big.mp4"
               controls="controls"></video>
      </div>
      <div class="fenxiang">
        <i class="pinglun iconfont icon-pinglun1">42</i>
        <i class="pinglun iconfont icon-dianzan2">100</i>
        <i class="pinglun iconfont icon-fenxiang1">1.2w</i>
      </div>
    </div>
    <div class="box3">
      <div class="yonghu1">
        <img class="yuan1"
             src="../img/31.jpg"
             title="" />
        <div class="wangming1">爱生活</div>
        <i class="huangguan iconfont icon-changyongtubiao-xianxingdaochu-zhuanqu--copy"></i>
        <van-tag class="guanzhu"
                 text-color="#f6f3ff"
                 size="large">+关注</van-tag>
        <div class="qianming1">4小时前</div>
        <div class="zi1">
          【<span style="color: blue">#接种疫苗后的注意事项</span>】
          能洗澡、喝酒、吃辛辣食物吗？目前不少市民对接种新冠疫苗的事项缺乏了解
        </div>
      </div>
      <div class="tupian">
        <video class="shiping1"
               src="http://123.56.23.31:88/st/M00/00/01/rBgF6WCbNpuAcJKQAA41UYbf93c708_big.mp4"
               controls="controls"></video>
      </div>
      <div class="fenxiang">
        <i class="pinglun iconfont icon-pinglun1">42</i>
        <i class="pinglun iconfont icon-dianzan2">100</i>
        <i class="pinglun iconfont icon-fenxiang1">1.2w</i>
      </div>
    </div>
    <div class="box3"
         style="margin-bottom: 65.8px">
      <div class="yonghu1">
        <img class="yuan1"
             src="../img/32.jpg"
             title="" />
        <div class="wangming1">shmily米莱</div>
        <i class="huangguan iconfont icon-changyongtubiao-xianxingdaochu-zhuanqu--copy"></i>
        <van-tag class="guanzhu"
                 text-color="#f6f3ff"
                 size="large">+关注</van-tag>
        <div class="qianming1">8小时前</div>
        <div class="zi1">
          如何预约接种<span style="color: blue">【#新冠疫苗#】</span>？
          接种新冠病毒疫苗有那些流程？为你解答。
        </div>
      </div>
      <div class="tupian">
        <video class="shiping1"
               src="http://123.56.23.31:88/st/M00/00/01/rBgF6WCbOBuAROCNADgLZ55u6Uc440_big.mp4"
               controls="controls"></video>
      </div>
      <div class="fenxiang">
        <i class="pinglun iconfont icon-pinglun1">42</i>
        <i class="pinglun iconfont icon-dianzan2">100</i>
        <i class="pinglun iconfont icon-fenxiang1">1.2w</i>
      </div>
    </div>

    <div></div>
    <div></div>
    <common-footer class="dibu"></common-footer>
  </div>
</template>

<script>
import CommonFooter from "@/components/CommonFooter.vue";
export default {
  components: {
    CommonFooter
  }
};
</script>


<style lang="scss" scoped>
.box {
  overflow: scroll;
}
// .didu{
//   position: fixed;
//  bottom: 0;
//  left: 0;
// }
.box1 {
  width: 100%;
  height: 40px;
  line-height: 40px;
  background-image: linear-gradient(to right, #92fe9d 0%, #00c9ff 100%);
  position: relative;
  //  display: flex;
  // justify-content: space-around;
}
.wode {
  margin-left: 45%;
  font-weight: bold;
  position: absolute;
}
.shezhi {
  margin-left: 80%;
  font-size: 18px;
  color: black;
  position: absolute;
}
.shezhi1 {
  float: right;
  font-size: 22px;
  margin-top: 1px;
  display: block;
  margin-right: 15px;

  color: black;
}

.shiping1 {
  width: 100%;
  height: 160px;
}
.box3 {
  margin-top: 10px;
  width: 100%;
  height: 300px;
  //  border-radius:20px;
  background: #ffffff;
  border: 1px solid rgb(206, 204, 204);
  box-shadow: 0px 6px 12px rgb(100, 98, 98);
  position: relative;
}
.yonghu1 {
  width: 100%;
  height: 100px;
  // background: rgb(165, 163, 163);
}
.yuan1 {
  height: 50px;
  width: 50px;
  border-radius: 50px;
  background: blue;
  margin-left: 10px;
  margin-top: 12px;
  position: absolute;
}
.wangming1 {
  position: absolute;
  top: 18px;
  left: 68px;
  font-size: 13px;
  font-weight: bold;
  color: rgba(253, 152, 1, 0.619);
}
.qianming1 {
  margin-top: 40px;
  font-size: 12px;
  left: 68px;
  position: absolute;
}
.zi1 {
  position: absolute;
  width: 95%;
  height: 40px;
  // background: brown;
  margin-top: 60px;
  line-height: 20px;
  margin-left: 10px;
  font-size: 13px;
}
.tupian1 {
  width: 300px;
  height: 160px;
  // background: brown;
  border: 1px solid rgb(194, 192, 192);
  margin-left: 7px;
}
.fenxiang {
  width: 100;
  height: 30px;
  // background: red;
  display: flex;
  justify-content: space-around;
  line-height: 30px;
  // border-bottom: 1px solid rgb(184, 182, 182);
}
.guanzhu {
  position: absolute;
  left: 260px;
  border-radius: 20px;
  top: 12px;
  background-image: linear-gradient(120deg, #89f7fe 0%, #66a6ff 100%);
  // border:ipx solid rgba(253, 152, 1, 0.619) ;
}
.huangguan {
  position: absolute;
  left: 124px;
  font-size: 20px;
  top: 14px;
  color: rgb(235, 174, 6);
  margin-left: 10px;
}
</style>